<template>
	<my-box title="支架压力">
		<template #right>
			<div class="flex">
				<div class="flex-center m-l-10">
					<label class="tc m-r-5" for="type" style="color: #4d88fe; width: 80px; font-size: 14px">子系统</label>
					<my-select :list="testPointType" clearable :teleported="false" v-model="form.testPointType" placeholder="请选择子系统" />
				</div>
				<div class="flex-center m-l-10">
					<label class="tc m-r-5" for="type" style="color: #4d88fe; width: 80px; font-size: 14px">测点类型</label>
					<my-select :list="testPointType" clearable :teleported="false" v-model="form.testPointType" placeholder="请选择测点类型" />
				</div>
				<div class="flex-center m-l-10">
					<my-date-pick
						type="daterange"
						v-model="form.date"
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						:teleported="false"
						:autoshortcuts="false"
					/>
				</div>
				<div class="flex-center pointer m-l-10">
					<my-input v-model="form.keyWord" :clearable="false" placeholder="搜索...">
						<template #suffix>
							<el-icon @click="refTable.reload()"><Search /></el-icon>
						</template>
					</my-input>
				</div>
			</div>
		</template>

		<MyListPanel ref="refTable" :total="state.total" :loadFn="loadFn">
			<template #default="{ page, size }">
				<my-table :data="state.list" :columns="columns">
					<template #index="{ $index }">
						<span style="color: #fff"> {{ $index + 1 + (page - 1) * size }}</span>
					</template>
				</my-table>
			</template>
		</MyListPanel>
	</my-box>
</template>

<script setup>
/**
 * 异常告警
 */
let refTable = shallowRef(null),
	form = ref({
		testPointType: '',
		date: [],
		keyWord: ''
	}),
	columns = [
		{
			label: '序号',
			prop: 'index',
			width: 60
		},
		{
			label: '子系统 ',
			prop: 'subsystem'
		},
		{
			label: '测点类型',
			prop: 'testPointType'
		},
		{
			label: '测点编号',
			prop: 'testPointId'
		},
		{
			label: '测点名称',
			prop: ''
		},
		{
			label: '监测值',
			prop: 'monitoringValue'
		},
		{
			label: '单位',
			prop: 'units'
		},
		{
			label: '告警等级',
			prop: 'alarmLevel'
		},
		{
			label: '告警名称',
			prop: 'alarmName'
		},
		{
			label: '告警描述',
			prop: 'alarmDesc'
		},
		{
			label: '告警时间   ',
			prop: 'alarmTime',
			width: 160
		}
	],
	state = reactive({
		list: [],
		total: 0
	})

function loadFn(pageNum, pageSize) {
	// let data = addDateRange(form.value, 'date', 'Date')
	// openAlarmInfo({ subsystemId, pageNum, pageSize, ...data }).then((res) => {
	// 	state.total = res.data?.total
	// 	state.list = res.data?.rows
	// })
}
</script>
